<template>
    <div class="login">
        <van-cell-group>
            <van-field
                    v-model="username"
                    label="用户名"
                    placeholder="请输入用户名"
                    left-icon="contact"
            />
        </van-cell-group>

        <van-cell-group>
            <van-field
                    v-model="phone"
                    label="手机"
                    placeholder="请输入手机"
                    left-icon="phone-o"
            />
        </van-cell-group>

        <div class="login-btn">
            <van-button block size="small" type="warning" @click="login">登录</van-button>
        </div>
    </div>
</template>

<script>
    import {
        Col,
        Icon,
        Cell,
        CellGroup,
        Toast,
        Field,
        Button
    } from 'vant'
    import {mapMutations,mapActions} from 'vuex';

    export default {
        components: {
            [Col.name]: Col,
            [Icon.name]: Icon,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            [Field.name]: Field,
            [Button.name]: Button
        },

        data() {
            return {
                phone: '',
                username: ''
            }
        },

        methods: {
            ...mapActions(['LoginByUsername']),
            login() {
                let that = this;
                that.LoginByUsername({username: that.username, phone: that.phone})
                        .then(response => {
                    that.$router.push('/home');
                })
            }
        }
    }
</script>

<style lang="less">
    .login {
        margin-top: 20px;
        background-color: #f2f2f2;

        &-btn {
            margin: 20px;
        }
    }
</style>
